import React, { Component } from 'react';
import {
  View,
  StyleSheet,
  ScrollView,
  Text,
  TouchableOpacity,
} from 'react-native';
import { px2dp } from 'bee/utils/px2dp';
import { InfoNormalItem } from 'bee/components/MyInformation';
import { colors, sizes } from 'bee/themes';
import { Icon, Names } from 'bee/components/Icon';

// @flow
type props = {
  navigation: object,
};

export default class AccountAndSecurity extends Component<props> {
  constructor() {
    super();

    this.state = {
      phone: '143450439503',
    };
  }
  render() {
    const { params } = this.props.navigation.state;
    return (
      <ScrollView>
        <View style={styles.border}>
          <InfoNormalItem title="手机号码:">
            <Text>{this.state.phone}</Text>
          </InfoNormalItem>
        </View>

        <View style={styles.border}>
          <InfoNormalItem title="营销员编号:">
            <Text>{params.code}</Text>
          </InfoNormalItem>
        </View>

        <TouchableOpacity
          style={styles.border}
          onPress={() => {
            this.props.navigation.navigate('ResetPassword', {
              phone: this.state.phone,
            });
          }}
        >
          <InfoNormalItem title="重置登录密码">
            <Icon name={Names.gengduofuben} size={sizes.f3} />
          </InfoNormalItem>
        </TouchableOpacity>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  //   blank: {
  //     height: px2dp(17),
  //   },
  border: {
    marginTop: px2dp(30),
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: colors['1104'],
  },
});
